<template>
  <div class="personal-main">
    <div class="personal-pay">
      <h3><i>借款人信息认证</i></h3>
      <el-steps :active="active" style="margin: 40px">
        <el-step title="填写借款人信息"></el-step>
        <el-step title="提交平台审核"></el-step>
        <el-step title="等待认证结果"></el-step>
      </el-steps>
      <div v-if="active === 0" class="user-borrower">
        <h6>个人基本信息</h6>
        <el-form label-width="120px">
          <el-form-item label="年龄">
            <el-col :span="5">
              <el-input v-model="borrower.age" />
            </el-col>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="borrower.sex">
              <el-option :value="1" :label="'男'" />
              <el-option :value="0" :label="'女'" />
            </el-select>
          </el-form-item>
          <el-form-item label="婚否">
            <el-select v-model="borrower.marry">
              <el-option :value="true" :label="'是'" />
              <el-option :value="false" :label="'否'" />
            </el-select>
          </el-form-item>
          <el-form-item label="学历">
            <el-select v-model="borrower.education">
              <el-option
                v-for="item in educationList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="行业">
            <el-select v-model="borrower.industry">
              <el-option
                v-for="item in industryList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="月收入">
            <el-select v-model="borrower.income">
              <el-option
                v-for="item in incomeList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="还款来源">
            <el-select v-model="borrower.returnSource">
              <el-option
                v-for="item in returnSourceList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <h6>联系人信息</h6>
        <el-form label-width="120px">
          <el-form-item label="联系人姓名">
            <el-col :span="5">
              <el-input v-model="borrower.contactsName" />
            </el-col>
          </el-form-item>
          <el-form-item label="联系人手机">
            <el-col :span="5">
              <el-input v-model="borrower.contactsMobile" />
            </el-col>
          </el-form-item>
          <el-form-item label="联系人关系">
            <el-select v-model="borrower.contactsRelation">
              <el-option
                v-for="item in contactsRelationList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <!-- 提交按钮 -->
        </el-form>
        <h6>身份认证信息</h6>
        <el-form label-width="120px">
          <el-form-item label="身份证人像面">
            <el-upload
              :on-success="onUploadSuccessIdCard1"
              :on-remove="onUploadRemove1"
              :multiple="false"
              :action="uploadUrl"
              :data="{ module: 'idCard1' }"
              :limit="1"
              list-type="picture-card"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="身份证国徽面">
            <el-upload
              :on-success="onUploadSuccessIdCard2"
              :on-remove="onUploadRemove2"
              :multiple="false"
              :action="uploadUrl"
              :data="{ module: 'idCard2' }"
              :limit="1"
              list-type="picture-card"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <h6>其他信息</h6>
        <el-form label-width="120px">
          <el-form-item label="房产信息">
            <el-upload
              :on-success="onUploadSuccessHouse"
              :on-remove="onUploadRemove3"
              :multiple="false"
              :action="uploadUrl"
              :data="{ module: 'house' }"
              list-type="picture-card"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="车辆信息">
            <el-upload
              :on-success="onUploadSuccessCar"
              :on-remove="onUploadRemove4"
              :multiple="false"
              :action="uploadUrl"
              :data="{ module: 'car' }"
              list-type="picture-card"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <div style="text-align: center;">
          <el-button type="primary" :disabled="flag" @click="handleSubmit"
            >提交</el-button
          >
        </div>
      </div>
      <div v-if="active === 1">
        <div style="margin-top:40px;">
          <el-alert
            title="您的认证申请已成功提交，请耐心等待"
            type="warning"
            show-icon
            :closable="false"
          >
            我们将在2小时内完成审核，审核时间为周一至周五8:00至20:00。
          </el-alert>
        </div>
      </div>
      <div v-if="active === 2">
        <div style="margin-top:40px;">
          <el-alert
            v-if="borrowerStatus === 2"
            title="您的认证审批已通过"
            type="success"
            show-icon
            :closable="false"
          >
          </el-alert>
          <NuxtLink to="/user/apply" v-if="borrowerStatus === 2">
            <el-button type="success" style="margin-top: 20px;">
              我要借款
            </el-button>
          </NuxtLink>
          <el-alert
            v-if="borrowerStatus === -1"
            title="您的认证审批未通过"
            type="error"
            show-icon
            :closable="false"
          >
          </el-alert>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      flag: false,
      active: null,
      submitBtnDisabled: false,
      //借款人审批状态
      borrowerStatus: 0,
      //借款人基本信息对象：
      borrower: {
        borrowerAttaches: [],
      },
      //联系方式
      contactsRelationList: [],
      //上传接口路径:
      uploadUrl: "http://192.168.1.170/api/oss/upload",
      //学历
      educationList: [],
      //行业
      industryList: [],
      //月收入
      incomeList: [],
      //还款来源
      returnSourceList: [],
      //联系人关系
      contactsRelationList: [],
    };
  },
  mounted() {
    this.initStatus();
  },
  methods: {
    //进入页面时加载借款人审批状态
    initStatus() {
      //打开页面时 查询当前用户的借款人审批状态 给active赋值
      let token = localStorage.getItem("SRB-TOKEN");
      if (!token) {
        //this.$message.warning("请先登录!!!");
        return;
      }
      this.$axios({
        url: "/api/core/borrower/auth/status",
        method: "GET",
        headers: { token },
      }).then((r) => {
        this.borrowerStatus = r.data.data.status;
        if (this.borrowerStatus === 0) {
          this.active = 0;
          //当借款人申请未提交时 才需要查询数据字典回显
          this.initDicts();
        } else if (this.borrowerStatus === 1) {
          this.active = 1;
        } else {
          this.active = 2;
        }
      });
    },
    //表单数据提交的按钮事件函数
    handleSubmit() {
      let token = localStorage.getItem("SRB-TOKEN");
      //3、如果没有srb-token结束
      if (!token) {
        this.$message.warning("请先登录!!!");
        return;
      }
      this.flag = true;
      //提交保存借款人数据的请求
      this.$axios({
        url: "/api/core/borrower/auth/commit",
        method: "POST",
        headers: { token },
        data: this.borrower,
      }).then((r) => {
        this.$message.success("提交成功");
        this.active = 1;
      });
    },

    // borrower: 借款人信息表
    // borrower_attach: 借款人附件表 ：  借款人和借款人附件 是1:n的关系
    //上传成功后：接收文件上传的路径 设置给借款人
    //上传身份证正面照组件的事件函数：
    //1、上传成功的回调：响应报文状态码为200时回调
    onUploadSuccessIdCard1(response, file, fileList) {
      this.onUploadSuccess(response, "idCard1", "身份证正面");
    },
    //2、上传身份证反面照
    onUploadSuccessIdCard2(response, file, fileList) {
      this.onUploadSuccess(response, "idCard2", "身份证反面");
    },
    //3、上传房本
    onUploadSuccessHouse(response, file, fileList) {
      this.onUploadSuccess(response, "house", "房产证");
    },
    //4、上传车辆信息
    onUploadSuccessCar(response, file, fileList) {
      this.onUploadSuccess(response, "car", "车");
    },
    //抽取文件上传后处理的方法
    onUploadSuccess(response, imageType, imageName) {
      if (response.code != 0) {
        this.$message.error(
          response.message ? response.message : "文件上传失败"
        );
        return;
      }
      this.borrower.borrowerAttaches.push({
        imageUrl: response.data.path,
        imageType,
        imageName,
      });
    },

    //2、移除文件时的回调： 删除oss中移除的文件
    onUploadRemove1(file, fileList) {
      //idCard1： 参数1 图片类型必须正确
      this.onUploadRemove("idCard1", "身份证正面照");
    },
    onUploadRemove2(file, fileList) {
      //idCard2
      this.onUploadRemove("idCard2", "身份证反面照");
    },
    onUploadRemove3(file, fileList) {
      //house
      this.onUploadRemove("house", "房产证");
    },
    onUploadRemove4(file, fileList) {
      //car
      this.onUploadRemove("car", "车");
    },
    onUploadRemove(imageType, imageName) {
      //获取要移除的文件的路径
      let attaches = [];
      let path = null;
      this.borrower.borrowerAttaches.forEach((borrowerAttach) => {
        if (borrowerAttach.imageType === imageType) {
          //记录需要删除的附件的路径
          path = borrowerAttach.imageUrl;
        } else {
          //记录不需要删除的附件对象
          attaches.push(borrowerAttach);
        }
      });
      //异步访问后端删除接口 删除附件
      if (path) {
        this.$axios({
          url: "/api/oss/delete",
          params: { path },
          method: "DELETE",
        }).then((r) => {
          this.$message.success(imageName + "移除成功");
          //删除本地缓存
          this.borrower.borrowerAttaches = attaches;
        });
      }
    },

    //页面初始化数据字典
    initDicts() {
      //一个个查询页面需要的数据字典集合:
      //1、学历：educationList
      this.$axios.$get("/api/core/dict/listDictsByCode/education").then((r) => {
        this.educationList = r.data.items;
      });
      //2、行业：industryList
      this.$axios.$get("/api/core/dict/listDictsByCode/industry").then((r) => {
        this.industryList = r.data.items;
      });
      //3、月收入：incomeList
      this.$axios.$get("/api/core/dict/listDictsByCode/income").then((r) => {
        this.incomeList = r.data.items;
      });
      //4、还款来源：returnSourceList
      this.$axios
        .$get("/api/core/dict/listDictsByCode/returnSource")
        .then((r) => {
          this.returnSourceList = r.data.items;
        });
      //5、联系人关系：contactsRelationList
      this.$axios.$get("/api/core/dict/listDictsByCode/relation").then((r) => {
        this.contactsRelationList = r.data.items;
      });
    },
  },
};
</script>
